<template>
    <div>
        <div class="dosing" v-for="(item, index) in coffee" :key="`coffee-sub-${item.id}`">
            <div class="dosing-title">{{ item.sub }}</div>
            <div class="dosing-content">
                <div @click="subCheckHandler(index, subindex)" class="button" :class="{ check: subitem.checked }"
                    v-for="(subitem, subindex) in item.children" :key="subitem.id">{{ subitem.name }}</div>
            </div>
        </div>
    </div>
</template>


<script lang="ts" setup>
import { nextTick } from "vue";
import type { ICoffeeType } from "../../index.vue"

defineOptions({
    name: "CoffeeDosing"
})

const emits = defineEmits(["update:coffee"]);

interface IDosingProps {
    coffee: Array<ICoffeeType>;
}

const props = withDefaults(defineProps<IDosingProps>(), {
    coffee: () => ([])
});


const subCheckHandler = (index: number, subindex: number) => {
    let _coffee_: Array<ICoffeeType> = JSON.parse(JSON.stringify(props.coffee));
    _coffee_ = _coffee_.map((item, i) => {
        return i !== index ? item : {
            ...item,
            children: item.children.map((op, j) => ({
                ...op,
                checked: j===subindex? !op.checked: false
            }))
        }
    });
    emits("update:coffee",[]);
    nextTick(()=>{
        emits("update:coffee", _coffee_);
    })
}

</script>


<style lang="less" scoped>
.dosing {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;

    &-title {
        width: 20%;
    }

    &-content {
        flex: 1;
        display: flex;

        .button {
            padding: 3px 10px;
            border-radius: 20px;
            border: 1px solid @primary-color;
            color: @primary-color;
            overflow: hidden;
            margin: 0 10px 5px 0;

            &.check {
                background-color: @primary-color;
                color: #FFF;
            }
        }
    }
}
</style>